<template>
  <div style="height: 100%">
    <el-container  style="height: 100%">
      <el-header class="el-header">
        <Header></Header>
      </el-header>
      <el-container>
        <!-- 左侧菜单 -->
        <el-aside class="el-aside" :width="$store.state.isCollapse?'64px':'200px'">
            <!-- 左侧菜单 -->
            <Menu></Menu>
        </el-aside>
        <el-main class="el-main">
            <!-- 导航菜单 -->
            <TagMenu></TagMenu>
            <router-view v-slot="{Component}">
              <!-- 获取单机菜单要展示的动态组件 -->
              <!-- 实现动态组件的调用 -->
              <keep-alive :max="8">
                <component :is="Component"></component>
              </keep-alive>
            </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import Menu from '@/components/Menu.vue';
import TagMenu from '@/components/TagMenu.vue';

</script>

<style scoped lang="less">
    .el-header {
        background: #1AA094;
    }
    .el-main {
        background: #F2F4F5;
    }
    .el-aside {
        height: 100%;
    }
</style>
